<template>
	<view class="index-content">
		<view class="user-box" :style="{backgroundImage:'url(' +headerBg +')'}">
			<view class="user-info">
				<view class="user-head" v-if="(JSON.stringify(userInfo)=='{}')">
					<image :src="defalutAvater" mode=""></image>
				</view>
				<view class="user-head" v-if="(JSON.stringify(userInfo)!='{}')" @click="taggleAvater">
					<image :src="userInfo.full_avatar" mode=""></image>
				</view>
				<view class="user-text">
					<view class="user-name" @click="$refs.inputDialog.open()">
						{{(JSON.stringify(userInfo)=='{}')?'您未登录账号':userInfo.nickname}}
					</view>
					<view v-if="JSON.stringify(userInfo)=='{}'" class="login-status" @click="gotoLigin">立即登录</view>
					<view v-if="JSON.stringify(userInfo)!='{}'">
						<view>ID({{userInfo.id}})</view>
					</view>
				</view>
				<view class="login-fun" v-if="JSON.stringify(userInfo)!='{}'">
					<view class="login-item" @click="refreshPage">
						<image src="../../static/index/icon2.png" mode=""></image>
						<view>刷新</view>
					</view>
					<view class="login-item" @click="logOff">
						<image src="../../static/index/icon3.png" mode=""></image>
						<view>注销</view>
					</view>
				</view>
			</view>
			<view class="user-address" @click="getLocation">
				<image src="../../static/index/dw.png" mode=""></image>
				<view>{{city}}</view>
			</view>
		</view>
		<!-- 		<view class="settled" @click="gotoNext('/pagesA/settled/index?settled=1')">
			<image src="../../static/index/讲师入驻.png" mode=""></image>
		</view> -->
		<view class="fun-box">
			<view class="subject-box">
				<view v-for="(item,index) in subjectList" :key="index">
					<u-tag :text="item.text" mode="dark" :type="item.checked ? 'success' : 'info'" shape="circle"
						@click="subjectClick(item)" />
				</view>
			</view>
			<!-- 科目一 -->
			<view class="subject-item" v-if="currentTag == 1">
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in leftList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
				<view class="subject1">
					<view class="subject-calc calc1" @click="gotoNext('/pagesA/topicPractice/index?type=1')">
						<view>顺序练习</view>
						<view>0/{{sortTotal}}</view>
					</view>
					<view class="subject-calc calc2" @click="gotoNext('/pagesA/mockExam/index?type=0')">
						<view>模拟考试</view>
						<view>仿真冲刺</view>
					</view>
				</view>
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in rightList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- 科目四 -->
			<view class="subject-item" v-if="currentTag == 4">
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in leftList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
				<view class="subject1">
					<view class="subject-calc calc1" @click="gotoNext('/pagesA/topicPractice/index?type=1')">
						<view>顺序练习</view>
						<view>0/{{sortTotal}}</view>
					</view>
					<view class="subject-calc calc2" @click="gotoNext('/pagesA/mockExam/index?type=0')">
						<view>模拟考试</view>
						<view>仿真冲刺</view>
					</view>
				</view>
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in rightList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 科目二 -->
		<view class="object-second" v-if="currentTag == 2">
			<view class="second-item" v-for="(item,index) in secondList" :key="index" @click="gotoSecond(item.id)">
				<view class="second-image">
					<image :src="item.full_cover" mode=""></image>
				</view>
				<view class="second-name">{{item.title}}</view>
				<view class="time-price">
					<view class="second-time">{{item.subject}}课时</view>
					<view class="second-price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
		<!-- 科目三 -->
		<view class="object-second" v-if="currentTag == 3">
			<view class="second-item" v-for="(item,index) in secondList" :key="index" @click="gotoSecond(item.id)">
				<view class="second-image">
					<image :src="item.full_cover" mode=""></image>
				</view>
				<view class="second-name">{{item.title}}</view>
				<view class="time-price">
					<view class="second-time">{{item.subject}}课时</view>
					<view class="second-price">￥{{item.price}}</view>
				</view>
			</view>
		</view>

		<view class="share" @click="golive(1)">
			<image :src="shareImg" mode=""></image>
		</view>
		<view class="settled" @click="golive(2)">
			<image :src="douyinImg" mode=""></image>
		</view>
		<view v-if="isShowService" class="customer-service " @click="telphone(servicePhone)">
			<image src="/static/index/客服悬浮球.png"></image>
		</view>
		<!--  -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入要修改的昵称" :value="nickname" placeholder="请输入内容"
				@confirm="nickNameConfirm" confirmText="确认修改"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getSortList,
		getvideoCoursesList,
		getServicePhone
	} from '../../api/index.js'
	import {
		changeAvaters,
		uploadImage,
		editNickname
	} from '@/api/user.js'
	import {
		toast
	} from '../../utils/common.js';
	import config from '@/config/config.js'
	import  QQMapWX from '@/utils/qqmap-wx-jssdk.js';
	export default {
		data() {
			return {
				userInfo: {},
				secondList: [],
				currentTag: 1,
				sortTotal: 0,
				shareImg: config.baseUrl + '/uploads/images/7AqL4qyqv5FWLl4AoTbOsIdBKhuZIsb1arw4QM6D.png',
				douyinImg: config.baseUrl + '/uploads/images/cz8UMxszpRIxvz4h84TpLomjHHC36NCgRIv5LkUs.png',
				headerBg: config.baseUrl + '/uploads/images/aOjvouwD5FwWPjjHDwOC8K4wAN7ldMjpG6liwkNb.png',
				defalutAvater: config.baseUrl + '/uploads/images/F9OHYmZNeQWd5stLnneKDYhkZimE0KwdTJe6bP56.png',
				city: '',
				nickname: '',
				servicePhone: '',
				isShowService: false,
				leftList: [{
						img: config.baseUrl + '/uploads/images/5AAJUZiGGaI5H5PXdWGmGSxvHGZnigePq1JX5bOM.png',
						title: '优品好课',
						url: '/pagesA/goodCourse/index?good=2'
					},
					{
						img: config.baseUrl + '/uploads/images/Cj5lDrpdErEDk69rLcEsClyEIIxSooW6nOlINn96.png',
						title: '专题练习',
						url: '/pagesA/specialExercise/index?type=2'
					},
					{
						img: config.baseUrl + '/uploads/images/InIobK109mu60dcuZTQwEmf5YOf9PGqeAb7cJQP4.png',
						title: '章节练习',
						url: '/pagesA/chapterPractice/index?type=3'
					},
					{
						img: config.baseUrl + '/uploads/images/e6tsAEAbjPvRA6El3Nu1EJkM60NPVbRi5magyHBt.png',
						title: '考前押题',
						url: '/pagesA/topicPractice/index?type=4'
					},
					{
						img: config.baseUrl + '/uploads/images/MauMasX3gJL1e6QG6Xanq16jegROWE5E4HDH2Hya.png',
						title: '免费试用',
						url: '/pagesA/topicPractice/index?type=1'
					}
				],
				rightList: [{
						img: config.baseUrl + '/uploads/images/h66giBgkOxUW8AAtppdoApdQrWw1F9QoPdU3jAjG.png',
						title: '已购课程',
						url: '/pagesA/boughtCourse/index?type=0'
					},
					{
						img: config.baseUrl + '/uploads/images/sgBOs6yEaYxe4kvvYUxu9dw0aZ69lXLY8KuNoj4M.png',
						title: '错题收藏',
						url: '/pagesA/questionWrong/index?current=0'
					},
					{
						img: config.baseUrl + '/uploads/images/VLG8bnCZxYuCI40BhaKO3vYuk8762YIHFfzwRNzT.png',
						title: '精选500',
						url: '/pagesA/topicPractice/index?type=5'
					},
					{
						img: config.baseUrl + '/uploads/images/4c4ZUgN2Nyr0K097XgWjc0AeVjrylloW88nBFFeC.png',
						title: '考试成绩',
						url: '/pagesA/testScores/index?type=0'
					},
					{
						img: config.baseUrl + '/uploads/images/rVycLZ2Dyz4WxrcIhFX6STTwGwcmpJ7hZNeTP2bH.png',
						title: new Date().getFullYear() + '新题',
						url: '/pagesA/topicPractice/index?type=6'
					}
				],
				subjectList: [{
						value: 1,
						text: '科目一',
						checked: true
					},
					{
						value: 2,
						text: '科目二',
						checked: false
					},
					{
						value: 3,
						text: '科目三',
						checked: false
					},
					{
						value: 4,
						text: '科目四',
						checked: false
					}
				]
			}
		},
		mounted() {
			if (Object.keys(this.$store.state.authInfo).length == 0) {
				this.userInfo = (uni.getStorageSync('userInfo'))
			}
			if (Object.keys(this.$store.state.authInfo).length != 0) {
				this.userInfo = this.$store.state.authInfo;
			}
			if (this.userInfo == '') {
				this.userInfo = {}
			}
			this.getSortLists()
			this.getLocation()
			this.getServicePhone()

		},
		onLoad(options) {},
		onShow() {
			if (Object.keys(this.$store.state.authInfo).length == 0) {
				this.userInfo = (uni.getStorageSync('userInfo'))
			}
			if (Object.keys(this.$store.state.authInfo).length != 0) {
				this.userInfo = this.$store.state.authInfo;
			}
			if (Object.keys(this.userInfo).length == 0) {
				this.userInfo = {}
			}

		},
		watch: {
			currentTag: {
				handler(val, oldval) {
					if (val == 1 || val == 4) {
						this.getSortLists()
					}
					if (val == 2) {
						this.getvideoCoursesList(2)
					}
					if (val == 3) {
						this.getvideoCoursesList(3)
					}
				},
				deep: true
			}
		},
		methods: {
			// 定位
			getLocation() {
				let that = this
				return new Promise((res, rej) => {
					uni.getFuzzyLocation({
						success: function(res) {
							this.longitude = res.longitude
							this.latitude = res.latitude
							let location = {
								longitude:res.longitude,
								latitude:res.latitude
							}
							// 腾讯地图Api
							let qqMapsdk = new QQMapWX({
								key: 'ZXUBZ-PTG3W-C5ERB-OIVDN-P7PKF-PPFS5' //这里填写自己申请的key
							});
							qqMapsdk.reverseGeocoder({
								location,
								success(response) {
									that.city = response.result.ad_info.city;
								},
								fail(err) {
									toast('定位失败')
								}
							});
						},
						fail: function(err) {
							console.log(err);
						}
					});
					//位置信息默认数据
					// uni.getLocation({
					// 	type: "gcj02",
					// 	success(res) {
					// 		that.nowAddress.longitude = res.longitude;
					// 		that.nowAddress.latitude = res.latitude;
					// 		// 腾讯地图Api
					// 		let qqMapsdk = new QQMapWX({
					// 			key: 'UWCBZ-CN2WI-YKVGL-52UH6-GYK3J-Q3FHS' //这里填写自己申请的key
					// 		});
					// 		qqMapsdk.reverseGeocoder({
					// 			location,
					// 			success(response) {
					// 				let info = response.result;
					// 				console.log(8888,info);
					// 				// toast(that.nowAddress.address)
					// 			},
					// 			fail(err) {
					// 				toast('定位失败')
					// 			}
					// 		});
					// 	},
					// 	fail(err) {
					// 		toast('定位失败')
					// 	},
					// });
				})
			},
			// 获取客服电话
			getServicePhone() {
				let that = this
				getServicePhone().then(res => {
					if (res.data.data.service_phone == null) {
						that.isShowService = false
					} else {
						that.isShowService = true
						that.servicePhone = res.data.data.service_phone
					}
					// 
				})
			},
			// 直播中学
			golive(type) {
				// 平台简介  
				if(type == 1){
					uni.reLaunch({
						url: '/pagesA/liveRich/index?type=2'
					})
				}
				// 抖音直播
				if(type == 2){
					uni.reLaunch({
						url: '/pagesA/liveRich/index?type=5'
					})
				}
			},
			// 刷新页面
			refreshPage() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			gotoNext(url) {
				let that = this
				// console.log(url);
				if (uni.getStorageSync('access_token') != '') {
					uni.navigateTo({
						url: url + '&currentTag=' + that.currentTag
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您当前未登录，是否登录？',
						success: function(res) {
							if (res.confirm) {
								that.gotoLigin()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},
			gotoSecond(id) {
				uni.navigateTo({
					url: '/pagesA/secondDetail/index?id=' + id
				})
			},
			telphone(phone) {
				if (!phone) {
					toast('没有客服信息')
					return;
				}
				// 获取设备平台
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {
							// console.log('拨打成功了');
						},
						fail() {
							// console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
								})
							}
						}
					})
				}
			},
			// 修改昵称
			nickNameConfirm(e) {
				let that = this
				editNickname({
					nickname: e
				}).then(res => {
					toast('修改成功')
					that.refreshLogin()
				})
			},
			// 修改头像
			taggleAvater() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						console.log();
						// console.log(res.tempFilePaths);
						let uploadTask = uni.uploadFile({
							url: config.baseUrl + '/api/public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: (res8) => {
								console.log(999, res8);
								changeAvaters({
									avatar: JSON.parse(res8.data).data
								}).then(res => {
									toast('修改成功');
									that.refreshLogin()
								})
							},
							complete(res) {
								// console.log(res);
								uni.hideLoading();
							}
						})
					}
				});
			},
			// 重新登录
			refreshLogin() {
				let that = this
				uni.showModal({
					content: '信息已修改，是否重新登录',
					cancelColor: '#2AC092',
					cancelText: '否',
					confirmText: '是',
					confirmColor: '#666666',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorage();
							that.$store.state.authInfo = {}
							uni.navigateTo({
								url: '/pages/login/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 
			logOff() {
				let that = this
				uni.showModal({
					content: '是否将该账号进行注销',
					cancelColor: '#2AC092',
					cancelText: '暂不注销',
					confirmText: '确认注销',
					confirmColor: '#666666',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorage();
							that.$store.state.authInfo = {}
							that.refreshPage();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			subjectClick(item) {
				this.subjectList.forEach(ele => {
					ele.checked = false
				})
				item.checked = true
				this.currentTag = item.value
			},
			gotoLigin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			// 顺序练习
			getSortLists() {
				let that = this;
				if (this.currentTag == 1 || this.currentTag == 4) {
					let tag = 1;
					if (this.currentTag == 4) {
						tag = 2;
					}
					getSortList({
						subject: tag
					}).then(res => {
						// console.log(788,res.data)
						that.sortTotal = res.data.total;
					}).catch()
				}
			},
			// 科目二视频列表
			getvideoCoursesList(km) {
				let km1 = 0;
				let that = this;
				if (km == 2) {
					km1 = 1;
					getvideoCoursesList({
						subject: km1
					}).then(res => {
						// console.log(2585,res.data);
						that.secondList = res.data.list;
					}).catch()
				}
				if (km == 3) {
					km1 = 2;
					getvideoCoursesList({
						subject: km1
					}).then(res => {
						// console.log(2585,res.data);
						that.secondList = res.data.list;
					}).catch()
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-size-default {
		font-size: 30rpx !important;
	}

	/deep/ .u-mode-dark-info {
		background-color: #EFEFEF !important;
		color: #666666 !important;
	}

	.user-box {
		padding: 40rpx 30rpx;
		color: #fff;
		// background-image: url('../../static/index/组 6.png');
		background-size: 100% 100%;

		.user-info {
			display: flex;
			position: relative;

			.user-head {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				overflow: hidden;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.user-text {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.user-name {
					font-size: 36rpx;
					display: flex;
					align-items: center;


					.user-tips {
						margin-left: 10rpx;
						width: 80rpx;
						height: 38rpx;

						>image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.login-status {
					padding: 5rpx 20rpx;
					background-color: rgba(255, 255, 255, .5);
					width: max-content;
					border-radius: 25rpx;
				}
			}

			.login-fun {
				position: absolute;
				left: 50%;
				top: 70%;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				text-align: center;

				.login-item {
					margin-right: 30rpx;

					>image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.user-address {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			letter-spacing: 2rpx;

			>image {
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.share {
		margin: 20upx;

		>image {
			width: 100%;
			height: 200rpx;
		}
	}

	.settled {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;

		>image {
			width: 100%;
			height: 300rpx;
		}
	}

	.fun-box {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;

		.subject-box {
			display: flex;
			justify-content: space-around;
		}

		.subject-item {
			display: flex;

			.fun-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;


				.fun-item {
					margin-bottom: 70rpx;
					text-align: center;

					>image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				view:last-child {
					margin-bottom: 0;
				}

			}

			.subject1 {
				flex: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.subject-calc {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #fff;

					>view:first-child {
						font-size: 34rpx;
						margin-bottom: 20rpx;
					}
				}

				.calc1 {
					background-color: #52ABF2;
					border: 20rpx solid rgb(203, 230, 251);
				}

				.calc2 {
					background-color: #2AC092;
					border: 20rpx solid rgb(191, 236, 222);
				}
			}
		}
	}

	.customer-service {
		position: fixed;
		bottom: 20%;
		right: 20rpx;

		>image {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.object-second {
		width: 95%;
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.second-item {
			border-radius: 10rpx;
			background-color: #fff;
			width: 49%;
			margin-bottom: 20rpx;

			.second-image {
				width: 100%;
				height: 230rpx;

				>image {
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.second-name,
			.time-price {
				padding: 10rpx;
			}

			.second-name {
				font-size: 28rpx;
				color: #333333;
			}

			.time-price {
				display: flex;
				justify-content: space-between;

				.second-time {
					color: #999999;
					font-size: 26rpx;
				}

				.second-price {
					color: #FF6D6A;
					font-size: 30rpx;
				}
			}
		}
	}
</style>